<template>
  <div id="userManagement" class="min_width">
    <!--头部导航-->
    <Header :chooseIt="chooseIt"></Header>
    <!--头部导航结束-->
    <main class="mainShow">
      <!-- 左侧导航 -->
      <div class="main-left">
        <!-- 多级导航 -->
        <el-aside width="100%" style="color: #333">
          <el-menu default-active="/user" :router="true" :unique-opened='true'>
            <el-menu-item
              index="/userlist"
              :class="{'isActive': active=='/userlist'|| active=='/userView' || active=='/cardlist'}"
              @click="reload()"
            >
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <!-- 左侧导航结束  -->

      <!-- 右侧主内容区 -->
      <div class="main-right">
        <transition name="fade">
          <router-view class="view" :key="activeDate"></router-view>
        </transition>
      </div>
      <!-- 右侧主内容区结束 -->
    </main>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "user",
  data: function() {
    return {
      activeDate: "", //刷新页面
      chooseIt: 4,
      active: "/userlist",
      headerFixed: true,
      type: 0
    };
  },
  created: function() {
    this.active = this.$route.path;
  },
   // 提供可注入子组件属性
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			//当前选中状态 reload定义
			reload() {
				// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
				this.$nextTick(() => {
					this.activeDate = Number(Date.parse(new Date()));
				})
			},
    //获取屏幕高度
    getHeight() {
      var newHeight = $(window).height() - 100;
      $(".mainShow").css("min-height", newHeight + "px");
    }
  },
  mounted() {
    this.getHeight();
  },
  watch: {
    $route: function(to, from) {
      let { type = 0 } = to.query;
      this.type = type;
      this.active = to.path;
    },
    deep: true
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>
